<template>
	<view class="tabbar-container">
		<image src="https://dujiaojing.oss-cn-huhehaote.aliyuncs.com/uploads/2025/7/29/1753776563219_abed89b2/a.png?x-oss-process=image/resize,w_300" class="img-back"></image>
		<!-- isRound是中间凸出样式的标志，用来判断当前子级是否是凸出样式的 -->
		<view :class="!item.isRound ? 'square' : 'is-square'" v-for="(item, index) in tabbarList" :key="index"
			@click="tabbarChange(index, item)">
			<!-- 不是凸出的子级 -->
			<template v-if="!item.isRound">
				<view class="item-top">
					<image :src="active == index ? item.selectedIconPath : item.iconPath"></image>
				</view>
				<view class="item-bottom" :class="{ 'active': active === index }">
					<text>{{ item.text }}</text>
				</view>
			</template>
			<!-- 凸出的子级 -->
			<template v-else>
				<view class="center-round">
					<view class="center-round-items">
						<image :src="active == index ? item.selectedIconPath : item.iconPath"></image>
						<text :class="{ 'round-active': active === index }">{{ item.text }}</text>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>
<script>
export default {
	name: 'Tabbar',
	props: {
		tabbarIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			// tabbar列表，配置自定义用到的属性字段
			tabbarList: [{
				pagePath: "/pages/tabbar/home/home",
				iconPath: "../../static/img/tabbar/home.png",
				selectedIconPath: "../../static/img/tabbar/homeactive.png",
				 // #ifdef APP-PLUS || H5
				iconPath: "/static/img/tabbar/home.png",
				selectedIconPath: "/static/img/tabbar/homeactive.png",
				// #endif
				text: "首页",
				isRound: false
			},
			{
				pagePath: "/pages/tabbar/follow/follow",
				iconPath: "../../static/img/tabbar/follow.png",
				selectedIconPath: "../../static/img/tabbar/followactive.png",
				 // #ifdef APP-PLUS || H5
				iconPath: "/static/img/tabbar/follow.png",
				selectedIconPath: "/static/img/tabbar/followactive.png",
				// #endif
				text: "圈子",
				isRound: false
			},
			{
				pagePath: "/pages/tabbar/ai/ai",
				iconPath: "../../static/img/tabbar/ai.png",
				selectedIconPath: "../../static/img/tabbar/ai.png",
				 // #ifdef APP-PLUS || H5
				iconPath: "/static/img/tabbar/ai.png",
				selectedIconPath: "/static/img/tabbar/ai.png",
				// #endif
				text: "爱问小鲸",
				isRound: true
			},
			{
				pagePath: "/pages/tabbar/message/message",
				iconPath: "../../static/img/tabbar/message.png",
				selectedIconPath: "../../static/img/tabbar/messageactive.png",
				 // #ifdef APP-PLUS || H5
				iconPath: "/static/img/tabbar/message.png",
				selectedIconPath: "/static/img/tabbar/messageactive.png",
				// #endif
				text: "消息",
				isRound: false
			},
			{
				pagePath: "/pages/tabbar/mine/mine",
				iconPath: "../../static/img/tabbar/mine.png",
				selectedIconPath: "../../static/img/tabbar/mineactive.png",
				 // #ifdef APP-PLUS || H5
				iconPath: "/static/img/tabbar/mine.png",
				selectedIconPath: "/static/img/tabbar/mineactive.png",
				// #endif
				text: "我的",
				isRound: false
			},
			],
			active: 0,
			isRound: false,
		}
	},
	mounted() {
		this.active = this.tabbarIndex
	},
	methods: {
		tabbarChange(index, item) {
			this.$emit('updateTabbar', index)
			// 登录拦截
			if (item.pagePath !== '/pages/tabbar/home/home') {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: "/subpackage1/login/account"
					})
				} else {
					if (item.text == '爱问小鲸') {
						uni.navigateTo({
							url: "/pages/tabbar/ai/ai"
						})
					} else {
						uni.switchTab({
							url: item.pagePath,
							success: function (e) {
							    uni.$emit('templateClick')
							}
						});
					}
				}
			} else {
				uni.switchTab({
					url: item.pagePath
				});
			}
		}
	}
}
</script>

<style lang="less" scoped>
.tabbar-container {
	width: 100%;
	height: 132rpx;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: center;
	color: #8F8F94;
	z-index: 1;

	.img-back {
		width: 100%;
		height: 130%;
		position: absolute;
		z-index: 1;
		top: -50rpx;
	}

	.square {
		width: 20%;
		height: 130rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		z-index: 2;

		.round-active {
			color: #3d95e5;
		}
	}

	.square .item-top {
		width: 45rpx;
		height: 45rpx;
		display: flex;
		justify-content: center;

		image {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.is-square {
		width: 20%;
		height: 130rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.round-active {
			color: #3d95e5;
		}
	}

	.center-round {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 75rpx;
		width: 150rpx;
		height: 150rpx;
		margin-top: -90rpx;
		z-index: 2;

		.center-round-items {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			position: relative;
			left: 9rpx;


			image {
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 20rpx;
			}
		}

		text {
			font-weight: 500;
			font-size: 30rpx;
			color: #8F8F94;
			position: absolute;
			top: 130rpx;
		}
	}

	.item-bottom {
		font-weight: 500;
		font-size: 30rpx;
		margin-top: 14rpx;
		color: #8F8F94;
	}

	.active {
		color: #3d95e5;
	}
}
</style>